﻿@using UcAsp.Net.BLL;
@model UcAsp.Net.Model.UserDefined
@{
    Layout = "~/themes/bootstrap/Shared/_Layout.cshtml";
}
@{
    ViewBag.Title = Model.DefinedTitle;
    ViewBag.KeyWords = Model.DefinedDescription;
    ViewBag.Description = Model.DefinedDescription;
}
<div class="container" style="padding:20px; width:860px; min-height:460px;">


<div id="hezuo" style="width:860px; min-height:440px;">
			<div data-iview:image="/Content/themes/red/photos/photo1.jpg" data-iview:transition="slice-top-fade,slice-right-fade">
				<div class="iview-caption caption1" data-x="80" data-y="200">董莹</div>
				<div class="iview-caption" data-x="100" data-y="275" data-transition="wipeRight">中国著名形象设计，化妆造型设计师，人物色彩学专家。</div>
				
			</div>

			<div data-iview:image="/Content/themes/red/photos/photo2.jpg" data-iview:transition="zigzag-drop-top,zigzag-drop-bottom" data-iview:pausetime="3000">
				<div class="iview-caption caption5" data-x="60" data-y="280" data-transition="wipeDown">Captions can be positioned and resized freely</div>
				<div class="iview-caption caption6" data-x="300" data-y="350" data-transition="wipeUp"><a href="#">Example URL-link</a></div>
			</div>

			<div data-iview:image="/Content/themes/red/photos/video.jpg" data-iview:type="video" data-iview:transition="strip-right-fade,strip-left-fade">
				
				<div class="iview-caption caption2" data-x="450" data-y="340" data-transition="wipeRight">Video</div>
				<div class="iview-caption caption3" data-x="600" data-y="345" data-transition="wipeLeft">Support</div>
			</div>

			<div data-iview:image="/Content/themes/red/photos/photo3.jpg">
				<div class="iview-caption caption4" data-x="50" data-y="80" data-width="312" data-transition="fade">Some of iView's Options:</div>
				<div class="iview-caption blackcaption" data-x="50" data-y="135" data-transition="wipeLeft" data-easing="easeInOutElastic">Touch swipe for iOS and Android devices</div>
				<div class="iview-caption blackcaption" data-x="50" data-y="172" data-transition="wipeLeft" data-easing="easeInOutElastic">Image And Thumbs Fully Resizable</div>
				<div class="iview-caption blackcaption" data-x="50" data-y="209" data-transition="wipeLeft" data-easing="easeInOutElastic">Customizable Transition Effect</div>
				<div class="iview-caption blackcaption" data-x="50" data-y="246" data-transition="wipeLeft" data-easing="easeInOutElastic">Freely Positionable and Stylable Captions</div>
				<div class="iview-caption blackcaption" data-x="50" data-y="283" data-transition="wipeLeft" data-easing="easeInOutElastic">Cross Browser Compatibility!</div>
			</div>

			<div data-iview:image="/Content/themes/red/photos/photo4.jpg">
				<div class="iview-caption caption7" data-x="0" data-y="0" data-width="180" data-height="480" data-transition="wipeRight"><h3>The Responsive Caption</h3>This is the product that you <b><i>all have been waiting for</b></i>!<br><br>Customize this slider with just a little HTML and CSS to your very needs. Give each slider some captions to transport your message.<br><br>All in all it works on every browser (including IE6 / 7 / 8) and on iOS and Android devices!</div>
			</div>

			<div data-iview:image="/Content/themes/red/photos/photo5.jpg">
				<div class="iview-caption caption5" data-x="60" data-y="150" data-transition="wipeLeft">What are you waiting for?</div>
				<div class="iview-caption caption6" data-x="160" data-y="230" data-transition="wipeRight">Get it Now!</div>
			</div>
		</div>
@(new HtmlString(@Model.DefinedHtml))

</div>

@section metas
{
    <script>
        $(document).ready(function () {
            $('#hezuo').iView({
                pauseTime: 5000,
                pauseOnHover: true,
                directionNavHoverOpacity: 0,
                timer: "Bar",
                timerDiameter: "50%",
                timerPadding: 0,
                timerStroke: 7,
                timerBarStroke: 0,
                timerColor: "#FFF",
                timerPosition: "bottom-right"
            });


        });
    </script>
}